<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="<%=basePath %>/resource/js/common-css-js.js"></script>
<title>大旗科技有限公司</title>
<style>
	.card-vc {/*卡片垂直居中*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.layui-card {/*修改卡片的宽度 和 背景阴影*/
		width: 40%;
		box-shadow: 0px 0px 1px 1px #888888;
	}

	.layui-card-header {
		border-bottom: 1px solid #999;
	}

	.layui-card-body {
		margin: 0px;
		padding: 0px;
	}

	.layui-table, .layui-table-view {
		margin: 0px;
	}

	.card-title {
		font-weight:normal;
	    vertical-align: -webkit-baseline-middle;
	}

</style>
</head>
<body>
	<div class="layui-card card-vc">
	   <div class="layui-card-header">
	     <label class="card-title">分类管理</label>
	     <a id="addBtn" class="layui-btn layui-btn-sm  layui-btn-normal" lay-event="detail">添加</a>
         <a id="delBtn" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="del">删除</a>	 
	   </div>
	   <div class="layui-card-body">
	    	<table id="table" lay-filter="tableFilter"></table>
	   </div>
	</div>
	<script type="text/html" id="barDemo">
         <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
         
         <!-- 这里同样支持 laytpl 语法，如： -->
         {{#  if(d.auth > 2){ }}
           <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
         {{#  } }}
	</script>
	<script type="text/javascript">
	layui.use('table', function(){
		
		var table = layui.table;
		
		//第一个实例
		table.render({
			elem: "#table",
			height: 315,
			url: path + "/repository/product-class/layui",
			page: false,
			cols : [[{
				type:'checkbox'
			},{
				field : 'productClassName',
				title : '分类名称',
				align:'center'
			},{
				align:'center', 
				toolbar: '#barDemo'
			}]]
		});

		//监听工具条
		table.on('tool(tableFilter)', function(obj) {
			
			//选中行的数据
			var selectedObj = obj.data;
			
			//判断点击的是哪个按钮
			var btnType = obj.event;
			
			if(btnType === "edit"){
				
				//修改操作
				layer.prompt({title: '修改分类名称', formType: 0,value: selectedObj.productClassName}, function(val, index){
					
					if(selectedObj.productClassName === val){
						 layer.msg('修改成功!', {icon: 1});
					}else{
						//吧输入进来的值,替换成需要修改的值
						selectedObj.productClassName = val;
						
						$.ajax({
							   type: 'PUT',
							   url: path + "/repository/product-class/",
							   async: false,
							   data: selectedObj,
							   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
							   beforeSend: function () {
								   layerIndex = layer.load(2);
					           },
					           statusCode: {
					        	   200: function(data) {
					        		   layer.msg('修改成功!', {icon: 1});
					        		   window.location.reload();
					        	   },
					        	   404: function(data) {
					        		   layer.msg('修改失败!', {icon: 0});
					        	   },
					        	   500: function() {
					        		   layer.msg('服务繁忙', {icon: 2});
					        	   }
				        	   },
				        	   complete: function(){
				        		   layer.close(layerIndex);
				        	   }
					     })
					}
				})
			}else{
				deleteProductClassById(selectedObj.productClassId);
		    }
		});

		$("#addBtn").click(function(){
			layer.prompt({title: '添加货物分类', formType: 0}, function(val, index){
				 $.ajax({
					   type: 'GET',
					   url: path + "/repository/product-class?productClassName=" + val,
					   async: false,
					   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
					   beforeSend: function () {
						   layerIndex = layer.load(2);
			           },
			           statusCode: {
			        	   200: function(data) {
			        		   layer.msg('该分类名称已经存在!', {icon: 0});
			        		   return false;
			        	   },
			        	   404: function(data) {
			        		   $.ajax({
								   type: 'POST',
								   url: path + "/repository/product-class",
								   data: {productClassName : val},
								   async: false,
								   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
						           statusCode: {
						        	   200: function(data) {
						        		   layer.msg('添加成功!', {icon: 1});
						        		   layer.close(index);
						        		   window.location.reload();
						        	   },
						        	   400: function(data) {
						        		   layer.msg('添加失败!', {icon: 0});
						        	   },
						        	   500: function() {
						        		   layer.msg('服务器繁忙!请联系管理员.', {icon: 2});
						        	   }
					        	   }
						       })
			        	   },
			        	   500: function() {
			        		   layer.msg('服务器繁忙!请联系管理员.', {icon: 2});
			        		   return false;
			        	   }
		        	   },
		        	   complete: function(){
		        		   layer.close(layerIndex);
		        	   }
			     })
			 });
		})
		
		$("#delBtn").click(function(){
			var checkStatus = table.checkStatus('table');
			
			if(checkStatus.data.length > 0){
				
				var removeId = "";
				
				//循环取出需要删除的id号码
				for(key in checkStatus.data){
					
					removeId += checkStatus.data[key].productClassId + "-";
				}
				
				deleteProductClassById(removeId);
			}
		})
		
		
		//根据id删除
		function deleteProductClassById(ids){
			$.ajax({
			   type: 'DELETE',
			   url: path + "/repository/product-class/"+ids,
			   async: false,
			   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
			   beforeSend: function () {
				   layerIndex = layer.load(2);
	           },
	           statusCode: {
	        	   200: function(data) {
	        		   layer.msg('删除成功!', {icon: 1});
	        		   window.location.reload();
	        	   },
	        	   404: function(data) {
	        		   layer.msg('删除失败!', {icon: 0});
	        	   },
	        	   500: function() {
	        		   layer.msg('服务繁忙', {icon: 2});
	        	   }
        	   },
        	   complete: function(){
        		   layer.close(layerIndex);
        	   }
		   })
		}
	});
	</script>
</body>
</html>